<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar showBack title="选择服务地址"></free-nav-bar>

		<!-- 服务地址输入框 -->
		<view class="flex p-2">
			<view class="flex flex-1 bg-light-muted searchInput mr-1">
				<view class="font-md flex" @click="goSelectCity">
					<text class="cityName flex justify-center align-center pl-3" style="white-space: nowrap;">{{city}}</text>
					<text class="flex justify-center align-center iconfont icon-zhankai mr-2 font" style="margin-top: 5rpx;"></text>
					<text class="flex justify-center align-center text-light" style="margin-bottom: 4rpx;">|</text>
				</view>
				<view class="flex flex-1">
					<text class="flex justify-center align-center iconfont icon-sousuo-1 pl-3 pr-1 font" style="margin-top: 5rpx;color: #CCCCCC;"></text>
					<!-- <input
						v-model="searchText"
						class="flex flex-1"
						style="margin-top: 14rpx;color: #3C8EFF;"
						type="text"
						placeholder-style="font-size:28rpx;color:#CCCCCC;padding-left:10rpx"
						placeholder="请输入您的服务地址"
						@confirm="selectNearAddress()"
					/> -->
					<view class="text-light flex align-center flex-1" @click="goInputAddress">请输入您的服务地址</view>
					<!-- <text v-if="searchText" class="flex justify-center align-center iconfont icon-qingkong font pr-3"
					style="margin-top: 5rpx;color: #CCCCCC;" @click="clearList"></text> -->
				</view>
			</view>
		</view>

		<title-list title="服务地址" rowHeight="66"></title-list>

		<view class="w-100 flex align-center justify-between" style="height: 88rpx;">
			<view class="text-ellipsis" style="width: 550rpx" >
				<text class="ml-3 mr-1 iconfont icon-dizhi" style="color: #3C8EFF;"></text>
				<text class="font-md">{{address.name}}</text>
			</view>
			<view class="mr-2">
				<!-- <text class="ml-3 mr-1 iconfont icon-dizhi" style="color: #3C8EFF;"></text> -->
				<view class="flex justify-center align-center" @click="getRegeo('shuaxin')">
					<image :src="shuaxin" mode="" style="width: 30rpx;height: 30rpx;"></image>
					<text class="font text-secondary" >重新定位</text>
				</view>
			</view>
		</view>

		<title-list title="附近地址"></title-list>

		<scroll-view class="border" scroll-y="true" :style="'height:'+scrollHeight+'px;'"
		 :scroll-top="scrollTop">
			<block v-if="(resultSearchList.length == 0 )&&(nearbyAddress.length>0)" v-for="(item,index) in nearbyAddress" :key="index">
				<list-item :title="item.name"  :title2="item.address.length>0?item.address:item.name" @click="setServiceAddress(item)"></list-item>
			</block>
			<template v-if="resultSearchList.length>0">
			<block v-for="(item,index) in resultSearchList" :key="index">
				<list-item :title="item.name"  :title2="item.district+item.address" @click="setServiceAddress(item)"></list-item>
			</block>
			</template>
		</scroll-view>
	</view>
</template>

<script>
// 自定义导航栏
import freeNavBar from '@/components/common/nav-bar/free-nav-bar.vue';
import titleList from '@/components/common/list/title-list.vue';
import listItem from '@/components/common/list/list-item.vue';

// 高德地图引入插件
// import amap from "@/common/js/amap-wx.js";
var amap = require('@/common/js/amap-wx.js');
export default {
	components: {
		freeNavBar,
		titleList,
		listItem
	},
	data() {
		return {
			shuaxin:"/static/img/shuaxin.png",
			scrollHeight:0,
			top:0,
			searchText: '',// 搜索的名字
			amapPlugin: null, // 高德地图实例
			key: '357e5716d381e2b85b2f80c6289af78c', // 高德地图key
			page:1, // 搜索页码
			// 服务地址
			address:{
				name:"",// 服务地址名称
				location:"",// 服务地址坐标
				cityName:""//城市
			}, 
			scrollTop:0,
			resultSearchList:[], // 搜索结果列表
			nearbyAddress:[] // 附近地址列表
		};
	},
	onLoad() {
		let res = uni.getSystemInfoSync()
		this.top = res.statusBarHeight + uni.upx2px(88+122+208)
		this.scrollHeight = res.windowHeight - this.top
		
		// 引入高德插件
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		
		

	},
	onShow() {
		this.first()
	},
	computed:{
		city(){
			console.log('123');
			if(this.address.cityName){
				if(this.address.cityName.length > 3){
					return this.address.cityName.slice(0,2) + '...'
				}
				return this.address.cityName
			}
		}
	},
	methods: {
		clearList(){
			this.searchText = ""
			this.resultSearchList = ""
		},
		first(){
			
			try{
				this.address = uni.getStorageSync('address')
			}catch(e){
				console.log('error99999899------',e)
			}
			
			console.log('this.address',this.address);
			// 当前缓存不存在定位
			if(!this.address){
				this.address = {
					name:"",// 服务地址
					location:"",
					cityName:""//城市
				}
				return this.getRegeo();
			}
			// 存在缓存仅更新 附近地址
			this.getRegeo('first');
		},
		// 所在城市
		getCity(){
			uni.getLocation({
				type: 'gcj02',
				geocode:true,//设置该参数为true可直接获取经纬度及城市信息
				success: (res)=> {
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					var point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(
						point, {},
						(event)=>{
							var address = event.address; // 转换后的地理位置
							var point = event.coord; // 转换后的坐标信息
							var coordType = event.coordType; // 转换后的坐标系类型
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							var addressList = address.match(reg).toString().split(",");
							this.address.cityName = addressList[1];
						},
						function(e) {}
					);
				},
			});
		},
		// 附近地址
		getRegeo(e="") {
			this.resultSearchList = []
			if(e=='shuaxin'){
				console.log('触发');
				this.shuaxin = '/static/gif/shuaxin.gif'
			}
			this.amapPlugin.getRegeo({
				success: data => {
					this.nearbyAddress = data[0].regeocodeData.pois;
					if(e!=="first"){
						// 当前定位
						this.getCity()
					}
					setTimeout(()=>{
						uni.setStorageSync('address',this.address)
						this.shuaxin = '/static/img/shuaxin.png'
					},500)
					console.log('触发',this.address);
				},
				fail:Error=>{
					this.openGps()
					// uni.showToast({
					// 	title:'请开启并授权定位服务',
					// 	icon:'none'
					// })
				}
				
			});
			
		},
		goInputAddress(){
			uni.navigateTo({
				url: '../inputAddress/inputAddress?cityName='+this.address.cityName
			});
		},
		goSelectCity() {
			uni.navigateTo({
				url: '../selectCity/selectCity?cityName='+this.address.cityName
			});
		},
		// 打开安卓或ios的定位服务
		openGps(){
			let system = uni.getSystemInfoSync();// 获取系统信息
			if (system.platform === 'android') { // 判断平台
				var context = plus.android.importClass("android.content.Context");
				var locationManager = plus.android.importClass("android.location.LocationManager");
				var main = plus.android.runtimeMainActivity();
				var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
				if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
					uni.showModal({
						title: '提示',
						content: '请打开定位服务功能',
						showCancel: false, // 不显示取消按钮
						success() {
							var Intent = plus.android.importClass('android.content.Intent');
							var Settings = plus.android.importClass('android.provider.Settings');
							var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS); 
							main.startActivity(intent); // 打开系统设置GPS服务页面

						}
					});	
				}
			}else if(system.platform === 'ios'){
				var cllocationManger = plus.ios.import("CLLocationManager");
				var enable = cllocationManger.locationServicesEnabled();
				var status = cllocationManger.authorizationStatus();
				plus.ios.deleteObject(cllocationManger);

				console.log("手机系统的定位没有打开");
				uni.showModal({
					title: '提示',
					content: '请打开定位服务功能',
					showCancel: false, // 不显示取消按钮
					success() {
						var UIApplication = plus.ios.import("UIApplication");
						var application2 = UIApplication.sharedApplication();
						var NSURL2 = plus.ios.import("NSURL");
					
						var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
						application2.openURL(setting2);
						plus.ios.deleteObject(setting2);
						plus.ios.deleteObject(NSURL2);
						plus.ios.deleteObject(application2);
					}
				});
			}
		},
		setServiceAddress(item){
			console.log(item);
			this.address.name = item.name
			this.address.location = item.location
			uni.setStorageSync('address',this.address)
			
		}
	}
};
</script>

<style scoped="scss">
.searchInput {
	border-radius: 35rpx;
	height: 69rpx;
}
.cityName {
	width: 64rpx;
	margin: 12rpx;
}
</style>
